<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        *{/*边框没有空白*/
            margin: 0;
            padding: 0 ;
        }
        form{
            width: 360px;
            min-height: 360px;
            border: 1px solid #666;/*边框*/
           /* margin: 50px auto;!*将表格水平居中*!*/
            /*既水平居中又垂直居中*/
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            /*将直线变圆滑*/
            border-radius:20px;
          /*  box-shadow:0             0        40px #3d6bff;!*阴影*!
                !*水平偏移量   垂直偏移量  *!*/
            text-align: center;/*字体水平居中*/
            padding: 10px;/*内边距*/
            box-sizing: border-box;/*控制尺寸，不会影响定义好的宽度*/
        }
        form .field{
            margin: 10px 0;
        }
        form .field input{/*修改输入框的内边距*/
            padding: 2px 5px;
        }
        form .field button{
            background-color: #3385ff;
            color: #ffffff;
            padding: 0 16px;
            height: 30px;
            border: none;
            border-radius: 15px;
        }
        form .field textarea{
            min-height: 100px;/*下拉框设置大小*/
            resize: none;/*不允许任意修改大小*/
        }
        form .field label,
        form .field textarea{
            vertical-align: top;/*把简介俩个字调整到上面*/
        }
    </style>
</head>
<body>
    <form action="http://www.baidu.com/s" method="post">
        <h4>请注册</h4>
        <div class="field">
            <label for="">账户</label>
            <input type="text" name="username" placeholder="登录名" maxlength="6"           value="张三" readonly>
                                                <!--解释显示-->   <!--最大写入字符数-->    <!--内容固定，显示但不可改-->
        <div class="field">
             <label for="">密码</label>/
             <input type="password" name="password" placeholder="登录密码">
        </div>
        </div>
        <div class="field">
            <label for="">手机</label>
            <input  type="tel" placeholder="手机号">
            <!--tel数字键盘，自动识别手机号-->
           <!-- <input  type="file" placeholder="手机号">
            可以打开文件-->

            <!--多选-->
            <div class="field">
                <label for="">爱好：</label>
                <input type="checkbox" name="like" value="lq" id="lq"><label for="lq" checked="checked">篮球</label>
                <input type="checkbox" name="like" value="zq" id="zq"><label for="zq" >足球</label>
                <input type="checkbox" name="like" value="ymq" id="ymq"><label for="ymq" >羽毛球</label>
                <!--id  for可以点字就进行选择-->
            </div>
        </div>
        <div class="field">
            <label for="">性别</label>
            <input type="radio" name="gender" value="女" id="女"checked ><label for="女">女</label>
            <input type="radio" name="gender" value="男" id="男"><label for="男">男</label>
            <input type="radio" name="gender" value="保密" id="保密"><label for="保密">保密</label>
            <!--name必须一样，才可以进行单选-->
        </div>
        <div class="field">
            <label for="">简介</label>
            <textarea name="summary"></textarea>
        </div>
        <!--下拉框-->
        <div class="field">
            <label for="">籍贯</label>
            <select name="home">
                <optgroup label="山西"><!--分组-->
                    <option value="jz">晋中</option><!--value是吧数据可以传到数据库中的-->
                    <option value="ty">太原</option>
                    <option value="yc">运城</option>
                    <option value="xz">忻州</option>
                </optgroup>

                <optgroup label="河北"><!--分组-->
                <option value="sjz">石家庄</option>
                <option value="hd">邯郸</option>
                </optgroup>
            </select>
        </div>
        <div class="field">
            <button type="button">普通按钮</button>
            <button type="reset">重置按钮</button>
            <button type="submit">提交按钮</button>
        </div>
    </form>
</body>
</html>